import { Button } from 'antd';
import React, { useState } from 'react';
import styles from './index.module.less';
import BMap from './components/BMap';
import AMap from './components/AMap';
import TMap from './components/TMap';

const coordinates = [
    [116.2756188794575, 39.85052030206029],
    [116.46555543433846, 39.85052030206029],
    [116.46555543433846, 39.977754285041044],
    [116.2756188794575, 39.977754285041044],
    [116.2756188794575, 39.85052030206029],
];
export default function Map3D(props) {
    const [overlayVisible, setOverlayVisible] = useState(true);
    const [earthVisible, setEarthVisible] = useState(false);

    return (
        <div className={styles.map2d}>
            <div className={styles.btns}>
                <Button
                    style={{ marginRight: 5 }}
                    shape="round"
                    type="primary"
                    onClick={() => setOverlayVisible(!overlayVisible)}
                >
                    {(overlayVisible ? '隐藏' : '显示') + '覆盖物'}
                </Button>
                <Button shape="round" type="primary" onClick={() => setEarthVisible(!earthVisible)}>
                    {(earthVisible ? '隐藏' : '显示') + '卫星图'}
                </Button>
            </div>
            <div className={styles.maps}>
                <BMap coordinates={coordinates} overlayVisible={overlayVisible} earthVisible={earthVisible} />
                <AMap coordinates={coordinates} overlayVisible={overlayVisible} earthVisible={earthVisible} />
                <TMap coordinates={coordinates} overlayVisible={overlayVisible} earthVisible={earthVisible} />
            </div>
        </div>
    );
}
